<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring3 mvc</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.json.js"></script>
<script type="text/javascript">
$(function(){
    
	$('button[id="json_get"]').bind('click',function(){
		var param = { RequestBody: '{ "name": "' + $('input[name="name"]').val() + '", "gender": "' + $('select[id="g"]').val() +'"}' };
		var dataType = $('select[id="t"]').val();
		$.ajax({
            url: 'mvc/1/20',
            contentType: "application/json",//application/xml
            processData: true,//contentType为xml时，此值为false
            dataType: dataType,//json--返回json数据类型；xml--返回xml
            data: param,
            success: function(data) {
			    renderContent(dataType,data);
            },            
            error:function(e){
           
            }
		});
	});

	$('button[id="json_post"]').bind('click',function(){
		var param = {"name":$('input[name="name"]').val(),"gender":$('select[id="g"]').val()};
		var dataType = $('select[id="t"]').val();
		$.postJSON('mvc/person',param,function(data){
			renderContent(dataType,data);
		});
	});	

	$('button[id="json_put"]').bind('click',function(){
		var param = {"name":$('input[name="name"]').val(),"gender":$('select[id="g"]').val()};
		var dataType = $('select[id="t"]').val();
		$.putJSON('mvc/person',param,function(data){
			renderContent(dataType,data);
		});
	});

	$('button[id="xml_get"]').bind('click',function(){
		var param = '<Person><name>'+$('input[name="name"]').val()+'</name><gender>'+$('select[id="g"]').val()+'</gender></Person>';
		var dataType = $('select[id="t"]').val();
		$.ajax({
            url: 'mvc/1/20',
            contentType: "application/xml",//application/xml
            processData: false,//contentType为xml时，此值为false
            dataType: dataType,//json--返回json数据类型；xml--返回xml
            data: "RequestBody="+param,
            success: function(data) {
			    renderContent(dataType,data);
            },            
            error:function(e){
           
            }
		});
	});

	$('button[id="xml_post"]').bind('click',function(){
		var param = '<Person><name>'+$('input[name="name"]').val()+'</name><gender>'+$('select[id="g"]').val()+'</gender></Person>';
		var dataType = $('select[id="t"]').val();
		$.ajax({
            url: 'mvc/person',
            contentType: "application/xml",//application/xml
            processData: true,//contentType为xml时，此值为false
            dataType: dataType,//json--返回json数据类型；xml--返回xml
            type:'post',
            data: param,
            success: function(data) {
			    renderContent(dataType,data);
            },            
            error:function(e){
           
            }
		});
	});	

	$('button[id="xml_put"]').bind('click',function(){
		var param = '<Person><name>'+$('input[name="name"]').val()+'</name><gender>'+$('select[id="g"]').val()+'</gender></Person>';
		var dataType = $('select[id="t"]').val();
		$.ajax({
            url: 'mvc/person',
            contentType: "application/xml",//application/xml
            processData: true,//contentType为xml时，此值为false
            dataType: dataType,//json--返回json数据类型；xml--返回xml
            type:"put",
            data: param,
            success: function(data) {
			    renderContent(dataType,data);
            },            
            error:function(e){
           
            }
		});
	});	
			
});

function renderContent(dataType,data){
    debugger;
    alert(data)
    var html = '';
	switch(dataType){
	case 'json':
		html = JSON.stringify(data);
		break;
	case 'html':
		html = data;
		break;
	case 'xml':
		html = $(data.getElementsByTagName('Person'));
		
	}
	$('#content').empty().html(html);
}

</script>
</head>
<body>
  <div id="person">
    <input type="text" name="name" value="">
    <select id="g">
      <option value="1">男1</option>
      <option value="2">女1</option>
    </select>
    返回类型1：
    <select id="t">
      <option value="html">html</option>
      <option value="json">json</option>
      <option value="xml">xml</option>
    </select>    
  </div>
  <div id="json">
    <button id="json_get">JSON Get</button>
    <button id="json_post">JSON Post</button>
    <button id="json_put">JSON Put</button>
  </div>
  <div id="xml">
    <button id="xml_get">xml Get</button>
    <button id="xml_post">xml Post</button>
    <button id="xml_put">xml Put</button>  
  </div>
  <div id="content"></div>
</body>
</html>